<script setup lang="ts">
import officeApi from "@/api/office/officeApi";

const props = defineProps(["officeId","id"]);

const wordEditor = ref();

// const container = ref();
const docValue = ref("");
const {
	UniverCore,
	UniverDesign,
	UniverEngineRender,
	UniverEngineFormula,
	UniverDocs,
	UniverDocsUi,
	UniverUi,
	UniverFacade,
} = window

var univer = new UniverCore.Univer({
	theme: UniverDesign.defaultTheme,
	locale: UniverCore.LocaleType.ZH_CN,
	locales: {
		[UniverCore.LocaleType.ZH_CN]: UniverUMD['zh-CN'],
	},
});



univer.registerPlugin(UniverEngineRender.UniverRenderEnginePlugin);
univer.registerPlugin(UniverEngineFormula.UniverFormulaEnginePlugin);

univer.registerPlugin(UniverUi.UniverUIPlugin, {
	container: "wordContainer",
	layout: {
		docContainerConfig: {
			innerLeft: false,
		},
	},
});

univer.registerPlugin(UniverDocs.UniverDocsPlugin);
univer.registerPlugin(UniverDocsUi.UniverDocsUIPlugin, {
	container: 'univerdoc',
	layout: {
		docContainerConfig: {
			innerLeft: false,
		},
	},
});




const queryData = async () => {
	let data = await officeApi.getContentByOfficeId({
		officeId: props.officeId
	})

	if (!data) {
		data = {};
	}
	if (!data.content) {
		return {}
	}
	return JSON.parse(data.content);
}
let workbook = null;
const initWork = async () => {
	const data = await queryData();
	console.log(data)
	docValue.value = JSON.stringify(data);
	// workbook = univer.createUnit(UniverCore.UniverInstanceType.UNIVER_DOC, data)
}

onMounted(async () => {
	await initWork();
})

const getValue = () => {
	// console.log(workbook)
	// const saveData = workbook.save();
	const c = wordEditor.value.getValue();
	return c;
	// return saveData;
}

const saveContent = () => {
	let data = getValue();

	officeApi.saveContent({
		officeId: props.officeId,
		content: JSON.stringify(data),
		fileTypeCode: "docx"
	});

}
defineExpose({
	getValue
})

</script>

<template>
	<div style="height:100%">
		<div style="position:absolute;right:0;z-index:999">
			<a-button type="primary" @click="saveContent" v-if="props.id">保存</a-button>

		</div>
		<WordEditor ref="wordEditor" :value="docValue" />
	</div>
</template>

<style scoped>
.univer-container {
	height: 100%
}
</style>
